<?php
include_once '../fn.php';
loginCheck();
$flag = 'categories';
?>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>Categories &laquo; Admin</title>
    <link rel="stylesheet" href="../assets/vendors/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../assets/vendors/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../assets/vendors/nprogress/nprogress.css">
    <link rel="stylesheet" href="../assets/css/admin.css">
    <script src="../assets/vendors/nprogress/nprogress.js"></script>
</head>

<body>
    <script>
        NProgress.start()
    </script>

    <div class="main">
        <nav class="navbar">
            <button class="btn btn-default navbar-btn fa fa-bars"></button>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="profile.html"><i class="fa fa-user"></i>个人中心</a></li>
                <li><a href="login.php"><i class="fa fa-sign-out"></i>退出</a></li>
            </ul>
        </nav>
        <div class="container-fluid">
            <div class="page-title">
                <h1>分类目录</h1>
            </div>
            <!-- 有错误信息时展示 -->
            <div class="alert alert-danger msg" style="display: none">
                <strong>错误！</strong><span class="msg-txt">xxx</span>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <form id="form">
                        <h2>添加新分类目录</h2>
                        <div class="form-group">
                            <label for="name">名称</label>
                            <input id="name" class="form-control" name="name" type="text" placeholder="分类名称">
                        </div>
                        <div class="form-group">
                            <label for="slug">别名</label>
                            <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
                            <p class="help-block">https://zce.me/category/<strong>slug</strong></p>
                        </div>
                        <div class="form-group">
                            <input type="button" class="btn btn-primary" value="添加" id="add-category">
                            <input type="button" class="btn btn-primary" value="放弃" id="cancel" style="display: none">
                            <!-- 重置按钮，将表单内容恢复默认状态，而不是粗暴的将表单元素的值设为空(毕竟选择框的值..没空) -->
                            <!-- <input type="reset" value="重置"> -->
                        </div>
                    </form>
                </div>
                <div class="col-md-8">
                    <div class="page-action">
                        <!-- show when multiple checked -->
                        <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none" id="delMany">批量删除</a>
                    </div>
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th class="text-center" width="40"><input type="checkbox" class="selectAll"></th>
                                <th>名称</th>
                                <th>Slug</th>
                                <th class="text-center" width="100">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 此处填充模版引擎 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入公共侧边栏 -->
    <?php include './inc/aside.php'; ?>

    <script src="../assets/vendors/jquery/jquery.js"></script>
    <script src="../assets/vendors/bootstrap/js/bootstrap.js"></script>
    <!-- 导入个模版引擎 -->
    <script src="../assets/vendors/template/template-web.js"></script>
    <script>
        NProgress.done()
    </script>

    <script type="text/html" id="tmp">
    {{ each list v i }}
    <tr>
        <td class="text-center"><input type="checkbox" class="select"></td>
        <td>{{ v.name }}</td>
        <td>{{ v.slug }}</td>
        <td class="text-center" id="{{ v.id }}">
            <a href="javascript:;" class="btn btn-info btn-xs" id="editBtn">编辑</a>
            <a href="javascript:;" class="btn btn-danger btn-xs" id="delBtn">删除</a>
        </td>
    </tr>
    {{ /each }}
    </script>

    <script>
        // 封装一个渲染标签的函数
        function setCategories() {

            // 从数据库获取数据
            $.ajax({
                url: './posts-add/postsAddGetCategories.php',
                dataType: 'json',
                success: function(info) {
                    console.log(info);

                    // 利用模版引擎渲染数据
                    $('tbody').html(template('tmp', {
                        list: info
                    }));
                }
            });
        }
        setCategories();

        // -------------------------------------------------------------
        // 全选单选功能的实现

        // 全选点击
        $('.selectAll').on('click', function(e) {
            // e.stopPropagation();
            // 子复选框的checked属性和全选框的checked属性值保持一致
            console.log('全选按钮被点了');
            $('.select').prop('checked', $(this).prop('checked'));

            // 控制批量删除按钮的出现
            console.log($(this).prop('checked'));

            if ($(this).prop('checked')) {
                $('#delMany').show();
            } else {
                $('#delMany').hide();
            }
        })

        // 单选点击(委托绑定)
        $('tbody').on('click', '.select', function() {
            console.log('单选按钮被点了');

            if ($('.select:checked').length == $('.select').length) {
                $('.selectAll').prop('checked', true);
            } else {
                $('.selectAll').prop('checked', false);
            }

            // 控制批量删除按钮的出现
            if ($('.select:checked').length != 0) {
                $('#delMany').show();
            } else {
                $('#delMany').hide();
            }

        })

        // ------------------------------------------------------------
        // 删除按钮功能实现
        $('tbody').on('click', '#delBtn', function() {
            console.log('删除按钮被点了');

            // 与后台通信
            $.ajax({
                type: 'get',
                url: './categories/categoriesDel.php',
                data: {
                    id: $(this).parent().attr('id')
                },
                dataType: 'json',
                success: function(info) {
                    console.log(info);

                    // 执行成功刷新页面
                    setCategories();
                }
            });
        })

        // ------------------------------------------------------------
        // 批量删除功能实现
        $('#delMany').on('click', function() {
            console.log('批量删除被点了');

            // 获取批量选中的id，拼成 id1,id2,id3的 串 传给后台 基于数据库 id in (id1,id2,id3) sql语法 批量删除
            var ids = '';
            $('.select:checked').each(function(index, domEle) {
                ids += $(domEle).parent().siblings('td[id]').attr('id') + ',';
            });

            ids = ids.substr(0, ids.length - 1);
            console.log(ids);

            // 与后台进行通信
            $.ajax({
                type: 'get',
                url: './categories/categoriesDel.php',
                data: {
                    id: ids
                },
                dataType: 'json',
                success: function(info) {
                    console.log(info);
                    // 执行成功刷新页面
                    setCategories();
                }
            });

        });

        // -------------------------------------------------------------------
        // 别名同步功能实现
        $('#slug').on('input', function() {
            $('p.help-block strong').html($(this).val());
        });

        // ---------------------------------------------------------------------
        // 添加新(修改)分类目录实现
        $('#add-category').click(function() {
            console.log('添加按钮被点了');

            if ($(this).val() == '添加') {
                // 与后台进行通信
                $.ajax({
                    type: 'get',
                    url: './categories/categoriesAdd.php',
                    data: {
                        name: $('#name').val(),
                        slug: $('#slug').val()
                    },
                    dataType: 'json',
                    beforeSend: function name() {
                        // 请求发送之前，对数据进行验证
                        if ($('#name').val().trim().length == 0 || $('#slug').val().trim().length == 0) { //trim方法清除空格

                            // 显示错误提示
                            $('.msg').show();
                            $('.msg-txt').text('数据不能为空');

                            return false; //取消ajax请求
                        } else {
                            $('.msg').hide();
                        }
                    },
                    success: function(info) {
                        console.log(info);

                        // 执行成功刷新页面
                        setCategories();

                        // 重置表单(可以创建一个input:reset，隐藏后用$().trigger('click')触发点击重置按钮)
                        // 主要还是用 form dom对象 的reset方法来直接重置
                        $('#form')[0].reset();
                    }
                })
            }else if ($(this).val() == '修改'){
                // 与修改的后台进行通信
                $.ajax({
                    type: 'get',
                    url: './categories/categoriesUpdate.php',
                    data: {
                        id: $('#add-category').attr('category-id'),
                        name: $('#name').val(),
                        slug: $('#slug').val()                       
                    },
                    dataType: 'json',
                    beforeSend: function () {
                        if ($('#name').val().trim().length == 0 || $('#slug').val().trim().length == 0) {
                            // 显示错误提示
                            $('.msg').show();
                            $('.msg-txt').text('数据不能为空');    
                            
                            return false; //取消ajax请求     
                                                                           
                        }else{
                            $('.msg').hide();
                        }
                    },
                    success: function (info) {
                        console.log(info);

                        // 修改成功后，重新渲染
                        setCategories();
                        $('#form')[0].reset();

                        // 将修改框复原成添加框
                        $('#cancel').hide();
                        $('#form h2').text('添加新分类目录');
                        $('#form strong').text('slug');
                        $('#add-category').val('添加');
                    }
                });
            }

        });

        // ----------------------------------------------------------
        // 编辑功能的实现
        $('tbody').on('click', '#editBtn', function() {
            console.log('编辑按钮被点了');
            // 给修改按钮添加 被改记录的id
            $('#add-category').attr('category-id', $(this).parent().attr('id'));

            // 与后台通信，获取被点击的分类相关信息
            $.ajax({
                type: 'get',
                url: './categories/categoriesGetById.php',
                data: {
                    id: $(this).parent().attr('id')
                },
                dataType: 'json',
                success: function(info) {
                    console.log(info);
                    var data = info[0];

                    // 获取信息后，将form表单改造成修改表单，最后通过 reset()方法重置
                    $('#form h2').text('修改新分类目录');
                    $('#name').val(data.name);
                    $('#slug').val(data.slug);
                    $('#form strong').text(data.slug);

                    // 将添加按钮切换成修改按钮
                    $('#add-category').val('修改');

                    // 显示出放弃按钮
                    $('#cancel').show();

                }
            })
        });

        // -------------------------------------------------------------
        // 放弃功能实现
        $('#cancel').click(function () {
            $('#form')[0].reset();

            // 将修改框复原成添加框
            $('#cancel').hide();
            $('#form h2').text('添加新分类目录');
            $('#form strong').text('slug');
            $('#add-category').val('添加');
        })
    </script>
</body>

</html>